<template>
    <div>
        <el-dropdown @command="handleSetLang" trigger="click">
            <div class="lang-active">
                <div v-for="(lang, i) in langs" :key="`LangActive${i}`" v-show="lang.key === activeLang">
                    {{ lang.value }} <i class="el-icon-arrow-down el-icon--right"></i>
                </div>
            </div>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(lang, i) in langs" :key="`Lang${i}`" :command="lang.key">
                    <span class="text">{{ lang.value }}</span></el-dropdown-item
                >
            </el-dropdown-menu>
        </el-dropdown>
        <div>
            <hr />
            <h1>正常写法</h1>
            <span v-text="$t('nav.device')"></span> || <span>{{ $t('nav.scada') }}</span>
            <hr />
            <h1>这种写法不行</h1>
            <span>{{ nav.device }}</span> || <span>{{ nav.scada }}</span>
            <hr />
            <h1>换种写法1: 定义变量</h1>
            <span>{{ $t(navNew.device) }}</span> || <span>{{ $t(navNew.scada) }}</span>
            <h1>换种写法1: 写到computed里面</h1>
            <span>{{ device }}</span> || <span>{{ scada }}</span>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
    name: 'En',
    data() {
        return {
            nav: {
                device: this.$t('nav.device'),
                scada: this.$t('nav.scada')
            },
            navNew: {
                device: 'nav.device',
                scada: 'nav.scada'
            },
            langs: [
                {
                    key: 'zh-CN',
                    value: '中文'
                },
                {
                    key: 'en-US',
                    value: 'EngLish'
                }
            ]
        };
    },
    computed: {
        ...mapGetters({
            activeLang: 'language'
        }),
        device() {
            return this.$t('nav.device');
        },
        scada() {
            return this.$t('nav.scada');
        }
    },
    created() {},
    mounted() {},
    methods: {
        ...mapMutations(['setLanguage']),
        handleSetLang(lang) {
            // 设置i18n.locale 组件库会按照上面的配置使用对应的文案文件
            this.$i18n.locale = lang;
            // 提交mutations
            this.setLanguage(lang);
        }
    }
};
</script>
<style lang="less">
h1 {
    font-size: 40px;
}
</style>
